"use strict";
import React from "react";
import ReactDOM from "react-dom";
import { History, Lifecycle } from "react-router";
import Reflux from "reflux";
import $ from "jquery";
import _ from "lodash";

var ReactCSSTransitionGroup = require('react-addons-css-transition-group');

import TimerMixin from "react-timer-mixin";
import IScroll from "./iscroll.jsx";

import { CONFIG } from "../common/config.js";
import { GOTOMixin, HighChartMixin } from "./mixins.jsx";
import { ClientActions } from "../action/clientaction.js";
import { ClientStore } from "../store/clientstore.js";
import { curDate, getISODate, getISODatetime, getDateStartEndByType } from "../common/datehelper.js";
import {doughNut2DConfig, pie2DConfig, getColors} from "../common/chartconfig.js";
import { numFixed, unitFormat } from "../common/numberformat.js";
import { sliceNoNull, upOrDown, loadingCheckChart1 } from "./common.jsx";
import { getLastTradingDay } from "../store/common.js";



var zbCal = function(dataArray, params){
	// 占比计算
	// sign 传入一个标记， 用于特殊数据处理
	// className: 指定 css 类名
	// colors: 指定 label 颜色
	// dataArray 示例：
	// [{"label": "两融成交量", "value": 460000000000, "vdate": 1430150400000 },
    //  {"label": "传统成交量", "value": 500000000000, "vdate": 1430150400000 },
 	//  {"label": "两融成交量", "value": 460000000000, "vdate": 1430160400000 },
	//  {"label": "传统成交量", "value": 500000000000, "vdate": 1430160400000 }, ]
	params = (params == null? {}: params);
	var sign = params['sign'];
	var className = params['className'];
	var colors = params['colors'];
	var decimal = params['decimal'];
	decimal = (decimal == null? 0: decimal);
	var unit = params['unit'];
	var unitBu = params['unitBu']; // 业务单位
	unitBu = (unitBu == null ? '户': unitBu)

	if (dataArray == null || dataArray.length == 0){
		// 返回一个空结构
		return (
			<div className={className==null? "info": className}>
				<div className="first">
					<div className="title"></div>
					<div className="value">{unitBu}</div>
				</div>
				<div className="first">
					<div className="title"></div>
					<div className="value">{unitBu}</div>
				</div>
			</div>
		)
	}

	// 合并计算
	var labels = [];// ['两融成交量', '传统成交量']
	var labelValues = {}; // {'两融成交量': [{ "value": 460000000000, "vdate": 1430150400000}, {"value": 460000000000, "vdate": 1430160400000}], 
						  //  "传统成交量": [{"value": 500000000000, "vdate": 1430150400000}, {"value": 500000000000, "vdate": 1430160400000}]}
	for(var i=0; i<dataArray.length; i++){
		var item = dataArray[i];
		if(labels.indexOf(item.label) < 0){
			labels.push(item.label);
			labelValues[item.label] = [];
		}
		labelValues[item.label].push(
			{vdate:item.yyyymmdd, value:item.value}
		)
	}

	// 数据预处理
	prepare(labels, labelValues, sign)

	// 生成 dom 节点
	var total = 0;
	for(var i=0; i<labels.length; i++){
		var label = labels[i];
		// 默认第一个对象是最新的数据
		var value = sliceNoNull(labelValues[label], 0).value;
		labels[i] = [label, value];
		total = total + value;
	}

	var infoList = [];
	for(var i=0; i<labels.length; i++){
		var label = labels[i][0];
		var value = labels[i][1];
		var unitValue = unitFormat(value, unit);
		infoList.push(
			<div key={label} className="first">
				<div className="title" style={{color: colors==null?'':colors[i]}}>{label}</div>
				<div className="value">{numFixed(unitValue[0],decimal)}{unitValue[1]}{unitBu}</div>
			</div>
		);
	}

	return (
		<div className={className==null? "info": className}>
			{infoList}
		</div>
	)
}

var prepare = function(labels, labelValues, sign){
	if(sign == 'AUM'){
		_.remove(labels, function(n){
			return n == '总资产'
		})
	}
}
var preparePieChart = function(values, sign){
	if(sign == 'AUM'){
		_.remove(values, function(item){
			return item.label == '总资产';
		})
	}
}

var loadingCheckChart = function(status, key, iframe){
	// 检查图形的数据是否loading完成
	if(status == null){
		return iframe;
	}
	if(status[key] == 'FETCHING'){
		return <i className="icon-spinner icon-spin"></i>;
	}
	return iframe;	
}

var loadingCheckData = function(status, key, ds_data_t1) {
	if (status == null) {
		return ds_data_t1;
	}
	if (status[key] == 'FETCHING') {
		return {};
	}
	return ds_data_t1;
}

var PageClient = React.createClass({
	mixins: [History, GOTOMixin, Reflux.connect(ClientStore, 'data'), TimerMixin, HighChartMixin ], // Reflux.connect(FundlistStore, "fundlist"),],
	// 总客户、存量资产特殊处理
	tradingDay: null,
	getInitialState: function(){
		return {
			displayBlock: 'ZKH', // 初始显示 总客户
			dimdate: 'DAY',
			type: 0,		// 1、左侧点击，2、dimdate变化
			disableChart: true, // 禁止渲染图形
		};
	},
	fetchLastDayData: function(apiCollections){
		var callback = function(lastTradingDay){
			ClientActions.fetchData({
				dimdate: 'DAY',
				ds_customer_t1_hb_comparetype: 'DOD',
				startdate: getISODate(lastTradingDay).replace(/\-/g, ''), 
				enddate: getISODate(lastTradingDay).replace(/\-/g, ''),
				apiCollections: apiCollections,

				ds_customer_t1_tb_day_startdate: getISODate(lastTradingDay).replace(/\-/g, ''), 
		        ds_customer_t1_tb_day_enddate: getISODate(lastTradingDay).replace(/\-/g, ''),
		        ds_customer_t1_hb_day_startdate: getISODate(lastTradingDay).replace(/\-/g, ''), 
		        ds_customer_t1_hb_day_enddate: getISODate(lastTradingDay).replace(/\-/g, ''),       
			});
			this.tradingDay = lastTradingDay;
			this.setState({enddate: getISODate(lastTradingDay)});
		}.bind(this)
		var today = new Date();
		getLastTradingDay(new Date(today.getFullYear(), today.getMonth(), today.getDate()), callback)
	},
	getApiCollection: function(displayBlock) {
		switch(displayBlock) {
			case 'ZKH': return ['customer'];
			case 'KHS': return ['newacct'];
			case 'XZYXH': return ['newcust'];
			case 'XZCFQY': return ['newcon'];
			case 'XZZCS': return ['newasset'];
			case 'XHS': return ['closeacc'];
			case 'LSZC': return ['lostass'];
			case 'CLZC': return ['asset'];
			default: return ['customer'];
		}
	},
	componentDidMount: function(){
		var parent = ReactDOM.findDOMNode(this);
		var parent = $(parent).parent();
		var className = parent.attr('class');
		if(className != 'page_custom'){
			parent.attr('class', 'page_custom');
		}
		var displayBlock = '';
		if(this.state.data && this.state.data.state && this.state.data.state.displayBlock){
			this.setState({displayBlock: this.state.data.state.displayBlock});
			displayBlock = this.state.data.state.displayBlock;
		}

		this.fetchLastDayData(this.getApiCollection(displayBlock))
		ClientActions.t0Fetch();
		// T0 刷新
		this.setInterval(ClientActions.t0Fetch, 1000*10);

		// 500ms 后启用图形渲染
		setTimeout(function(){this.setState({disableChart: false})}.bind(this), 500);
	},
	goBackIndex: function(){
		// 禁用图形渲染
		this.setState({disableChart: true});
		this.gotoIndex();
	},
	updateData: function(resolve, reject) {
		var callback = function() {
			resolve();
		}
		ClientActions.t0Fetch(callback);
    },
	handleRowTap: function(event){
		var tr = $(event.target).parents('tr');
		var target = tr.attr('data-target');
		var dimdate = this.state.dimdate;
		if(target == this.state.displayBlock){
			return;
		}
		this.setState({displayBlock: target, type: 1});
		if (dimdate == 'DAY') {
			this.fetchLastDayData(this.getApiCollection(target));
		} else {
			ClientActions.fetchData({
				'dimdate': dimdate,
				'startdate': this.state.startdate,
				'enddate': this.state.enddate,
				'apiCollections': this.getApiCollection(target)
			})
		}
		ClientActions.saveState({displayBlock: target})
	},
	handleDateTypeChoose: function(event){
		var dimdate = $(event.target).attr('data-target');
		var params = {dimdate: dimdate};
		var apiCollections = this.getApiCollection(this.state.displayBlock);
		this.setState({type: 2});
		if (dimdate == 'DAY') {
			this.setState({dimdate: dimdate});
			params['startdate'] = curDate().replace(/\-/g, '');
			params['enddate'] = curDate().replace(/\-/g, '');
			params['ds_customer_t1_hb_comparetype'] = 'DOD';
			this.fetchLastDayData(apiCollections);
			return;
		} else if (dimdate == 'MONTH') {
			params['ds_customer_t1_hb_comparetype'] = 'MOM';
		} else if (dimdate == 'WEEK') {
			params['ds_customer_t1_hb_comparetype'] = 'WOW';
		} else if (dimdate == 'QUARTER') {
			params['ds_customer_t1_hb_comparetype'] = 'QOQ';
		} else if (dimdate == 'YEAR') {
			params['ds_customer_t1_hb_comparetype'] = 'YOY';
		}
		var date = getDateStartEndByType(new Date(), dimdate);
		params['startdate'] = getISODate(date.startdate);
		params['enddate'] = getISODate(date.enddate);
		this.setState({dimdate: dimdate});

		ClientActions.fetchData({
			'dimdate': dimdate,
			'startdate': params['startdate'].replace('/\-/g', ''),
			'enddate': params['enddate'].replace('/\-/g', ''),
			'ds_customer_t1_hb_comparetype': params['ds_customer_t1_hb_comparetype'],
			'apiCollections': apiCollections
		});
	},
	getChartConfig: function(data){
		var config = {};
		$.extend(true, config, doughNut2DConfig);
		config.renderAt = "chart";
		config.dataSource.chart.bgAlpha = "100";
		config['dataSource']['data'] = data;
		return config;
	},
	getPieChartConfig: function(values, color){
		// values: [{label:xxx, value:xxx}, {label:xxx, value:xxx}]
		var config = $.extend(true, {}, pie2DConfig);
		config.renderAt = 'chart';
		if(values == null || values.length == 0)
			return config;
		var data = values;
		config['dataSource']['data'] = data;
		config.height = 100;
		if(color == null){
			color = '#ffffff';
		}
		config.dataSource.chart.bgcolor = color;
		config.dataSource.chart.bgAlpha = "100";
		config.dataSource.chart.pieRadius = "30";
		return config;
	},

	render: function(){
		// 取得数据
		var status = _.get(this.state.data, 'status', {});

		var ds_customer_t0 = _.get(this.state.data, 'ds_customer_t0', {});
		var ds_customer_t1 = _.get(this.state.data, 'ds_customer_t1_tb', {value: [{}]}).value[0];
		var ds_customer_t1_tb = _.get(this.state.data, 'ds_customer_t1_tb', {chaindata: [{}]}).chaindata[0];
		var ds_customer_t1_hb = _.get(this.state.data, 'ds_customer_t1_hb', {chaindata: [{}]}).chaindata[0];
		var ds_customer_t1_hb_cvalue = _.get(this.state.data, 'ds_customer_t1_hb', {comparevalue: [{}]}).comparevalue[0];

		// 总客户和存量资产特殊处理，不传月、年参数
		var ds_customer_t1_day = _.get(this.state.data, 'ds_customer_t1_tb_day', {value: [{}]}).value[0];
		var ds_customer_t1_tb_day = _.get(this.state.data, 'ds_customer_t1_tb_day', {chaindata: [{}]}).chaindata[0];
		var ds_customer_t1_hb_day = _.get(this.state.data, 'ds_customer_t1_hb_day', {chaindata: [{}]}).chaindata[0];
		var ds_customer_t1_hb_cvalue_day = _.get(this.state.data, 'ds_customer_t1_hb_day', {comparevalue: [{}]}).comparevalue[0];

		if (this.state.type == 2) {
			ds_customer_t1 = loadingCheckData(status, 'ds_customer_t1_tb', ds_customer_t1);
			ds_customer_t1_tb = loadingCheckData(status, 'ds_customer_t1_tb', ds_customer_t1_tb);
			ds_customer_t1_hb = loadingCheckData(status, 'ds_customer_t1_hb', ds_customer_t1_hb);
			ds_customer_t1_hb_cvalue = loadingCheckData(status, 'ds_customer_t1_hb', ds_customer_t1_hb_cvalue);

			// 总客户和存量资产特殊处理，不传月、年参数
			ds_customer_t1_day = loadingCheckData(status, 'ds_customer_t1_tb_day', ds_customer_t1_day);
			ds_customer_t1_tb_day = loadingCheckData(status, 'ds_customer_t1_tb_day', ds_customer_t1_tb_day);
			ds_customer_t1_hb_day = loadingCheckData(status, 'ds_customer_t1_hb_day', ds_customer_t1_hb_day);
			ds_customer_t1_hb_cvalue_day = loadingCheckData(status, 'ds_customer_t1_hb_day', ds_customer_t1_hb_cvalue_day);
		}

		var ds_customer_volumes = _.get(this.state.data, 'ds_customer_volumes', {value: []}).value;
		var ds_newacct_volumes = _.get(this.state.data, 'ds_newacct_volumes', {value: []}).value;
		var ds_newcust_volumes = _.get(this.state.data, 'ds_newcust_volumes', {value: []}).value;
		var ds_newcon_volumes = _.get(this.state.data, 'ds_newcon_volumes', {value: []}).value;
		var ds_newasset_volumes = _.get(this.state.data, 'ds_newasset_volumes', {value: []}).value;
		var ds_closeacc_volumes = _.get(this.state.data, 'ds_closeacc_volumes', {value: []}).value;
		var ds_lostass_volumes = _.get(this.state.data, 'ds_lostass_volumes', {value: []}).value;
		var ds_asset_volumes = _.get(this.state.data, 'ds_asset_volumes', {value: []}).value;

		var colors = getColors();

		// 总客户
		var customer_volume_t0 = _.get(ds_customer_t0, 'customer_volumes', null);
		customer_volume_t0 = customer_volume_t0 == null ? '--' : customer_volume_t0;
		var customer_volume_t1 = _.get(ds_customer_t1_day, 'customer_volumes', null);
		var customer_volume_hb = _.get(ds_customer_t1_hb_day, 'customer_volumes', null);
		customer_volume_hb = numFixed(customer_volume_hb==null? '': customer_volume_hb*100, 2);
		var customer_volume_tb = _.get(ds_customer_t1_tb_day, 'customer_volumes', null);
		customer_volume_tb = numFixed(customer_volume_tb==null? '': customer_volume_tb*100, 2);

		var chartZKH = null, summaryZKH = null, loadingZKH = null;
		if(this.state.displayBlock == 'ZKH'){
			// var configZKH = this.getPieChartConfig(ds_customer_volumes, "#FDF5E8");
			var configZKH = this.getHPie2DConfig(ds_customer_volumes, {
				height: (screen.width-64)*0.45 - 10,
				backgroundColor: '#FDF5E8'
			})
			if(!this.state.disableChart){
				chartZKH = this.getHighChart(configZKH);
			}
			loadingZKH = loadingCheckChart1(status, 'ds_customer_volumes');
			// this.addChart('chart-zkh', configZKH);
		
//			var jsonConfigZKH = encodeURIComponent(JSON.stringify(configZKH));
//			chartZKH = (<iframe src={"./chart.html?data="+jsonConfigZKH} height={parseInt(configZKH.height) + 4} width="100%" style={{border:"none", backgroundColor: configZKH.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//			chartZKH = loadingCheckChart(status, 'ds_customer_volumes', chartZKH);
			summaryZKH = zbCal(ds_customer_volumes, {colors:colors, decimal: 2, unit: '万'});
		} 		

		var blockZKH = (
			<tr className={"zkh " + (customer_volume_hb>0? 'up' : 'down')}  data-target="ZKH" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>总客户</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'zkh' + customer_volume_t0} className={"value"}>{numFixed(unitFormat(customer_volume_t0)[0],2)}</span>
								</ReactCSSTransitionGroup>
								<small>{unitFormat(customer_volume_t0)[1]}户</small></p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(unitFormat(customer_volume_t1, "万")[0],2)}</span><small>万户</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(customer_volume_hb)}>{customer_volume_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(customer_volume_tb)}>{customer_volume_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='ZKH'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingZKH==null?'block': 'none')}} id="chart-zkh">
									{chartZKH}
								</span>
								{loadingZKH}
							</div>
							{summaryZKH}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientTotal}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.customer_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)

		// 开户数
		var newacct_volume_t0 = _.get(ds_customer_t0, 'newacct_volumes', null);
		newacct_volume_t0 = newacct_volume_t0 == null ? '--' : newacct_volume_t0;
		var newacct_volume_t1 = _.get(ds_customer_t1, 'newacct_volumes', null);
		var newacct_volume_hb = _.get(ds_customer_t1_hb, 'newacct_volumes', null);
		newacct_volume_hb = numFixed(newacct_volume_hb==null? '': newacct_volume_hb*100, 2);
		var newacct_volume_tb = _.get(ds_customer_t1_tb, 'newacct_volumes', null);
		newacct_volume_tb = numFixed(newacct_volume_tb==null? '': newacct_volume_tb*100, 2);

		var chartKHS = null, summaryKHS = null, loadingKHS = null;
		if(this.state.displayBlock == 'KHS'){
			// var configKHS = this.getPieChartConfig(ds_newacct_volumes);
			var configKHS = this.getHPie2DConfig(ds_newacct_volumes, {
				height: (screen.width-64)*0.45 - 10, 
			})
			if(!this.state.disableChart){
				chartKHS = this.getHighChart(configKHS);
			}
			var loadingKHS = loadingCheckChart1(status, 'ds_newacct_volumes');
			// this.addChart('chart-khs', configKHS);
		
//			var jsonConfigKHS = encodeURIComponent(JSON.stringify(configKHS));
//			chartKHS = (<iframe src={"./chart.html?data="+jsonConfigKHS} height={parseInt(configKHS.height) + 4} width="100%" style={{border:"none", backgroundColor: configKHS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
//			chartKHS = loadingCheckChart(status, 'ds_newacct_volumes', chartKHS);
			summaryKHS = zbCal(ds_newacct_volumes, {unit:'', colors:colors});
		} 		

		var blockKHS = (
			<tr className={"khs " + (newacct_volume_hb>0? 'up' : 'down')}  data-target="KHS" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>开户数</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'khs' + newacct_volume_t0} className={"value"}>{newacct_volume_t0}</span>
								</ReactCSSTransitionGroup>
								<small>户</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{newacct_volume_t1}</span><small>户</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(newacct_volume_hb)}>{newacct_volume_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(newacct_volume_tb)}>{newacct_volume_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='KHS'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingKHS==null?'block': 'none')}} id="chart-khs">
									{chartKHS}
								</span>
								{loadingKHS}</div>
							{summaryKHS}
							</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientKHS}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.newacct_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)

		// 新增有效户
		var newcust_volumes_t0 = _.get(ds_customer_t0, 'newcust_volumes', null);
		newcust_volumes_t0 = newcust_volumes_t0 == null ? '--' : newcust_volumes_t0;
		var newcust_volumes_t1 = _.get(ds_customer_t1, 'newcust_volumes', null);
		var newcust_volumes_hb = _.get(ds_customer_t1_hb, 'newcust_volumes', null);
		newcust_volumes_hb = numFixed(newcust_volumes_hb==null? '': newcust_volumes_hb*100, 2);
		var newcust_volumes_tb = _.get(ds_customer_t1_tb, 'newcust_volumes', null);
		newcust_volumes_tb = numFixed(newcust_volumes_tb==null? '': newcust_volumes_tb*100, 2);

		var chartXZYXH = null, summaryXZYXH = null, loadingXZYXH;
		if(this.state.displayBlock == 'XZYXH'){
			// var configXZYXH = this.getPieChartConfig(ds_newcust_volumes, "#FDF5E8");
			var configXZYXH = this.getHPie2DConfig(ds_newcust_volumes, {
				height: (screen.width-64)*0.45 - 10,
				backgroundColor: '#FDF5E8'
			});
			if(!this.state.disableChart){
				var chartXZYXH = this.getHighChart(configXZYXH);
			}
			var loadingXZYXH = loadingCheckChart1(status, 'ds_newcust_volumes');
			// this.addChart('chart-xzyxh', configXZYXH);
		
			// var jsonConfigXZYXH = encodeURIComponent(JSON.stringify(configXZYXH));
			// chartXZYXH = (<iframe src={"./chart.html?data="+jsonConfigXZYXH} height={parseInt(configXZYXH.height) + 4} width="100%" style={{border:"none", backgroundColor: configXZYXH.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartXZYXH = loadingCheckChart(status, 'ds_newcust_volumes', chartXZYXH);
			summaryXZYXH = zbCal(ds_newcust_volumes, {unit:'', colors:colors});
		} 		

		var blockXZYXH = (
			<tr className={"xzyxh " + (newcust_volumes_hb>0? 'up' : 'down')}  data-target="XZYXH" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>新增有效户</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'xzyxh' + newcust_volumes_t0} className={"value"}>{newcust_volumes_t0}</span>
								</ReactCSSTransitionGroup>
								<small>户</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{newcust_volumes_t1}</span><small>户</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(newcust_volumes_hb)}>{newcust_volumes_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(newcust_volumes_tb)}>{newcust_volumes_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='XZYXH'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingXZYXH==null?'block': 'none')}} id="chart-xzyxh">
									{chartXZYXH}
								</span>
								{loadingXZYXH}
							</div>
							{summaryXZYXH}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientXZYXH}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.newcust_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)

		// 新增财富签约
		var newcon_volumes_t0 = _.get(ds_customer_t0, 'newcon_volumes', null);
		newcon_volumes_t0 = newcon_volumes_t0 == null ? '--' : newcon_volumes_t0;
		var newcon_volumes_t1 = _.get(ds_customer_t1, 'newcon_volumes', null);
		var newcon_volumes_hb = _.get(ds_customer_t1_hb, 'newcon_volumes', null);
		newcon_volumes_hb = numFixed(newcon_volumes_hb==null? '': newcon_volumes_hb*100, 2);
		var newcon_volumes_tb = _.get(ds_customer_t1_tb, 'newcon_volumes', null);
		newcon_volumes_tb = numFixed(newcon_volumes_tb==null? '': newcon_volumes_tb*100, 2);

		var chartXZCFQY = null, summaryXZCFQY = null, loadingXZCFQY;
		if(this.state.displayBlock == 'XZCFQY'){
			// var configXZCFQY = this.getPieChartConfig(ds_newcon_volumes);
			var configXZCFQY = this.getHPie2DConfig(ds_newcon_volumes, {
				height: (screen.width-64)*0.45 - 10,
			})
			if(!this.state.disableChart){
				chartXZCFQY = this.getHighChart(configXZCFQY);
			}
			var loadingXZCFQY = loadingCheckChart1(status, 'ds_newcon_volumes');
			// this.addChart('chart-xzcfqy', configXZCFQY);
		
			// var jsonConfigXZCFQY = encodeURIComponent(JSON.stringify(configXZCFQY));
			// chartXZCFQY = (<iframe src={"./chart.html?data="+jsonConfigXZCFQY} height={parseInt(configXZCFQY.height) + 4} width="100%" style={{border:"none", backgroundColor: configXZCFQY.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartXZCFQY = loadingCheckChart(status, 'ds_newcon_volumes', chartXZCFQY);
			summaryXZCFQY = zbCal(ds_newcon_volumes, {unit:'', colors:colors});
		} 		
		var blockXZCFQY = (
			<tr className={"xzcfqy " + (newcon_volumes_hb>0? 'up' : 'down')}  data-target="XZCFQY" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>新增财富签约</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'xzcfqy' + newcon_volumes_t0} className={"value"}>{newcon_volumes_t0}</span>
								</ReactCSSTransitionGroup>
								<small>户</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{newcon_volumes_t1}</span><small>户</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(newcon_volumes_hb)}>{newcon_volumes_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(newcon_volumes_tb)}>{newcon_volumes_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='XZCFQY'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingXZCFQY==null?'block': 'none')}} id="chart-xzcfqy">
									{chartXZCFQY}
								</span>
								{loadingXZCFQY}
							</div>
							{summaryXZCFQY}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientXZCFQY}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.newcon_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)


		// 新增资产数
		var newasset_volumes_t0 = unitFormat(_.get(ds_customer_t0, 'newasset_volumes', null));
		newasset_volumes_t0[0] = newasset_volumes_t0[0] == null ? '--' : newasset_volumes_t0[0];
		var newasset_volumes_t1 = unitFormat(_.get(ds_customer_t1, 'newasset_volumes', null));
		var newasset_volumes_hb = _.get(ds_customer_t1_hb, 'newasset_volumes', null);
		newasset_volumes_hb = numFixed(newasset_volumes_hb==null? '': newasset_volumes_hb*100, 2);
		var newasset_volumes_tb = _.get(ds_customer_t1_tb, 'newasset_volumes', null);
		newasset_volumes_tb = numFixed(newasset_volumes_tb==null? '': newasset_volumes_tb*100, 2);

		var chartXZZCS = null, summaryXZZCS = null, loadingXZZCS;
		if(this.state.displayBlock == 'XZZCS'){
			// var configXZZCS = this.getPieChartConfig(ds_newasset_volumes, "#FDF5E8");
			var configXZZCS = this.getHPie2DConfig(ds_newasset_volumes, {
				height: (screen.width-64)*0.45 - 10,
				backgroundColor: '#FDF5E8'
			})
			if(!this.state.disableChart){
				chartXZZCS = this.getHighChart(configXZZCS);
			}
			var loadingXZZCS = loadingCheckChart1(status, 'ds_newasset_volumes');
			// this.addChart('chart-xzzcs', configXZZCS);
		
			// var jsonConfigXZZCS = encodeURIComponent(JSON.stringify(configXZZCS));
			// chartXZZCS = (<iframe src={"./chart.html?data="+jsonConfigXZZCS} height={parseInt(configXZZCS.height) + 4} width="100%" style={{border:"none", backgroundColor: configXZZCS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartXZZCS = loadingCheckChart(status, 'ds_newasset_volumes', chartXZZCS);			
			summaryXZZCS = zbCal(ds_newasset_volumes, {unit:'亿', colors:colors, unitBu: '元', decimal: 2});
		} 
		var blockXZZCS = (
			<tr className={"xzzcs " + (newasset_volumes_hb>0? 'up' : 'down')}  data-target="XZZCS" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>新增资产数</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'xzzcs' + newasset_volumes_t0[0]} className={"value"}>{numFixed(newasset_volumes_t0[0],2)}</span>
								</ReactCSSTransitionGroup>
								<small>{newasset_volumes_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(newasset_volumes_t1[0], 2)}</span><small>{newasset_volumes_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(newasset_volumes_hb)}>{newasset_volumes_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(newasset_volumes_tb)}>{newasset_volumes_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='XZZCS'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingXZZCS==null?'block': 'none')}} id="chart-xzzcs">
									{chartXZZCS}
								</span>
								{loadingXZZCS}
							</div>
							{summaryXZZCS}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientXZZCS}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.newasset_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)

		// 销户数
		var closeacc_volumes_t0 = _.get(ds_customer_t0, 'closeacc_volumes', null);
		closeacc_volumes_t0 = closeacc_volumes_t0 == null ? '--' : closeacc_volumes_t0;
		var closeacc_volumes_t1 = _.get(ds_customer_t1, 'closeacct_volumes', null);
		var closeacc_volumes_hb = _.get(ds_customer_t1_hb, 'closeacct_volumes', null);
		closeacc_volumes_hb = numFixed(closeacc_volumes_hb==null? '': closeacc_volumes_hb*100, 2);
		var closeacc_volumes_tb = _.get(ds_customer_t1_tb, 'closeacct_volumes', null);
		closeacc_volumes_tb = numFixed(closeacc_volumes_tb==null? '': closeacc_volumes_tb*100, 2);

		var chartXHS = null, summaryXHS = null, loadingXHS;
		if(this.state.displayBlock == 'XHS'){
			// var configXHS = this.getPieChartConfig(ds_closeacc_volumes);
			var configXHS = this.getHPie2DConfig(ds_closeacc_volumes, {
				height: (screen.width-64)*0.45 - 10,
			})
			if(!this.state.disableChart){
				chartXHS = this.getHighChart(configXHS);
			}
			var loadingXHS = loadingCheckChart1(status, 'ds_closeacc_volumes');
			// this.addChart('chart-xhs', configXHS);
		
			// var jsonConfigXHS = encodeURIComponent(JSON.stringify(configXHS));
			// chartXHS = (<iframe src={"./chart.html?data="+jsonConfigXHS} height={parseInt(configXHS.height) + 4} width="100%" style={{border:"none", backgroundColor: configXHS.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartXHS = loadingCheckChart(status, 'ds_closeacc_volumes', chartXHS);			
			summaryXHS = zbCal(ds_closeacc_volumes, {unit:'', colors:colors});
		} 
		var blockXHS = (
			<tr className={"xhs " + (closeacc_volumes_hb>0? 'up' : 'down')}  data-target="XHS" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>销户数</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'xhs' + closeacc_volumes_t0} className={"value"}>{closeacc_volumes_t0}</span>
								</ReactCSSTransitionGroup>
								<small>户</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{closeacc_volumes_t1}</span><small>户</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(closeacc_volumes_hb)}>{closeacc_volumes_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(closeacc_volumes_tb)}>{closeacc_volumes_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='XHS'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingXHS==null?'block': 'none')}} id="chart-xhs">
									{chartXHS}
								</span>
								{loadingXHS}
							</div>
							{summaryXHS}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientXHS}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.closeacc_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)


		// 流失资产
		var lostass_volumes_t0 = unitFormat(_.get(ds_customer_t0, 'lostass_volumes', null));
		lostass_volumes_t0[0] = lostass_volumes_t0[0] == null ? '--' : lostass_volumes_t0[0];
		var lostass_volumes_t1 = unitFormat(_.get(ds_customer_t1, 'lostasset_volumes', null));
		var lostass_volumes_hb = _.get(ds_customer_t1_hb, 'lostasset_volumes', null);
		lostass_volumes_hb = numFixed(lostass_volumes_hb==null? '': lostass_volumes_hb*100, 2);
		var lostass_volumes_tb = _.get(ds_customer_t1_tb, 'lostasset_volumes', null);
		lostass_volumes_tb = numFixed(lostass_volumes_tb==null? '': lostass_volumes_tb*100, 2);

		var chartLSZC = null, summaryLSZC = null, loadingLSZC;
		if(this.state.displayBlock == 'LSZC'){
			// var configLSZC = this.getPieChartConfig(ds_lostass_volumes, "#FDF5E8");
			var configLSZC = this.getHPie2DConfig(ds_lostass_volumes, {
				height: (screen.width-64)*0.45 - 10,
				backgroundColor: '#FDF5E8'
			})
			if(!this.state.disableChart){
				chartLSZC = this.getHighChart(configLSZC);
			}
			var loadingLSZC = loadingCheckChart1(status, 'ds_lostass_volumes');
			// this.addChart('chart-lszc', configLSZC);
		
			// var jsonConfigLSZC = encodeURIComponent(JSON.stringify(configLSZC));
			// chartLSZC = (<iframe src={"./chart.html?data="+jsonConfigLSZC} height={parseInt(configLSZC.height) + 4} width="100%" style={{border:"none", backgroundColor: configLSZC.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartLSZC = loadingCheckChart(status, 'ds_lostass_volumes', chartLSZC);
			summaryLSZC = zbCal(ds_lostass_volumes, {unitBu:'元', colors:colors, unit:'万', decimal:2});
		} 		
		var blockLSZC = (
			<tr className={"lszc " + (lostass_volumes_hb>0? 'up' : 'down')}  data-target="LSZC" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>流失资产</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'lszc' + lostass_volumes_t0[0]} className={"value"}>{numFixed(lostass_volumes_t0[0],2)}</span>
								</ReactCSSTransitionGroup>
								<small>{lostass_volumes_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(lostass_volumes_t1[0], 2)}</span><small>{lostass_volumes_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(lostass_volumes_hb)}>{lostass_volumes_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(lostass_volumes_tb)}>{lostass_volumes_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='LSZC'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingLSZC==null?'block': 'none')}} id="chart-lszc">
									{chartLSZC}
								</span>
								{loadingLSZC}
							</div>
							{summaryLSZC}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientLSZC}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.lostass_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>
		)


		// 存量资产
		var asset_volumes_t0 = unitFormat(_.get(ds_customer_t0, 'asset_volumes', null));
		asset_volumes_t0[0] = asset_volumes_t0[0] == null ? '--' : asset_volumes_t0[0];
		var asset_volumes_t1 = unitFormat(_.get(ds_customer_t1_day, 'asset_volumes', null));
		var asset_volumes_hb = _.get(ds_customer_t1_hb_day, 'asset_volumes', null);
		asset_volumes_hb = numFixed(asset_volumes_hb==null? '': asset_volumes_hb*100, 2);
		var asset_volumes_tb = _.get(ds_customer_t1_tb_day, 'asset_volumes', null);
		asset_volumes_tb = numFixed(asset_volumes_tb==null? '': asset_volumes_tb*100, 2);

		var chartCLZC = null, summaryCLZC = null, loadingCLZC;
		if(this.state.displayBlock == 'CLZC'){
			// var configCLZC = this.getPieChartConfig(ds_asset_volumes);
			var configCLZC = this.getHPie2DConfig(ds_asset_volumes, {
				height: (screen.width-64)*0.45 - 10,
			})
			if(!this.state.disableChart){
				chartCLZC = this.getHighChart(configCLZC);
			}
			var loadingCLZC = loadingCheckChart1(status, 'ds_asset_volumes');
			// this.addChart('chart-clzc', configCLZC);
		
			// var jsonConfigCLZC = encodeURIComponent(JSON.stringify(configCLZC));
			// chartCLZC = (<iframe src={"./chart.html?data="+jsonConfigCLZC} height={parseInt(configCLZC.height) + 4} width="100%" style={{border:"none", backgroundColor: configCLZC.dataSource.chart.bgcolor}} allowTransparency="true"></iframe>);
			// chartCLZC = loadingCheckChart(status, 'ds_asset_volumes', chartCLZC);			
			summaryCLZC = zbCal(ds_asset_volumes, {unitBu:'元', colors:colors, unit:'亿', decimal:2});
		} 		
		var blockCLZC = (
			<tr className={"clzc " + (asset_volumes_hb>0? 'up' : 'down')}  data-target="CLZC" onTouchTap={this.handleRowTap}>
				<td className="left">
					<div className="title">
						<div className="icon"></div>
						<p>存量资产</p>
					</div>
				</td>
				<td className="right">
					<div className="top_info">
						<div className="price">
							<p className="pre_value"><span className="type">T+0</span>
								<ReactCSSTransitionGroup transitionName="blink" transitionAppear={false} transitionAppearTimeout={2000} transitionEnterTimeout={2000} transitionLeave={false}>
									<span key={'clzc' + asset_volumes_t0[0]} className={"value"}>{numFixed(asset_volumes_t0[0],0)}</span>
								</ReactCSSTransitionGroup>
								<small>{asset_volumes_t0[1]}元</small>
							</p>
							<p className="next_value"><span className="type">T+1</span><span className="value">{numFixed(asset_volumes_t1[0],0)}</span><small>{asset_volumes_t1[1]}元</small></p>
						</div>
						<div className="chg">
							<p className="hb">环比:<span className={upOrDown(asset_volumes_hb)}>{asset_volumes_hb}%</span></p>
							<p className="tb">同比:<span className={upOrDown(asset_volumes_tb)}>{asset_volumes_tb}%</span></p>
						</div>
					</div>
					<div className="fold_main" style={{display: this.state.displayBlock=='CLZC'?"block": 'none'}}>
						<div className="mid_info">
							<div className="chart">
								<span style={{width: '100%', display: (loadingCLZC==null?'block': 'none')}} id="chart-clzc">
									{chartCLZC}
								</span>
								{loadingCLZC}
							</div>
							{summaryCLZC}
						</div>
						<div className="btm_info">
							<div className="more" onTouchTap={this.gotoClientCLZC}><span><i className="icon-align-left"></i></span><label>详情</label></div>
							<div className="time">
								<i className="icon-time"></i> <span>{getISODatetime(new Date(ds_customer_t0.asset_date)).substr(0, 16)}</span>
							</div>
						</div>
					</div>
				</td>
			</tr>	
		)

		// 顶部环比交易量
		var newacct_volume_diff = _.get(ds_customer_t1, 'newacct_volumes', null) - _.get(ds_customer_t1_hb_cvalue, 'newacct_volumes', null);
		newacct_volume_diff = (newacct_volume_diff == null ? '': newacct_volume_diff);

		return (
	<div id="container" className="container">
		<header id="header">
			<span className="back_btn" onTouchTap={this.goBackIndex}><i className="icon-angle-left"></i></span>
			<span className="header_title"><span>客户数据</span></span>
		</header>
		<IScroll pullDownIcon onRefresh={this.updateData}>
		<div id="page_main">
			<div className="list_topMain">
				<div className="sort_main">
					<div className="sort_type">
						<span onTouchTap={this.handleDateTypeChoose} data-target="DAY" className={"first " + (this.state.dimdate=='DAY'?'now': '')}>日</span>
		                <span style={{marginLeft: '-1px'}} onTouchTap={this.handleDateTypeChoose} data-target="MONTH" className={" " + (this.state.dimdate=='MONTH'?'now': '')}>月</span>
	               		 <span onTouchTap={this.handleDateTypeChoose} data-target="YEAR" className={"second " + (this.state.dimdate=='YEAR'?'now': '')}>年</span>
		            </div>
				</div>
				<div className="first_main">
					<div className="title">开户数</div>
					<div className="value_main">
						<span className="value">{newacct_volume_t1}</span><small>户</small>
					</div>
					<div className="change_main">
						<span className="change">{newacct_volume_diff}户</span>
						<span className="chg up_color">{newacct_volume_hb}%</span>
					</div>
				</div>
			</div>
			<div className="table_list_model">
				<table className="slide">
					<tbody>
					{blockZKH}	
					{blockKHS}
					{blockXZYXH}
					{blockXZCFQY}	
					{blockXZZCS}	
					{blockXHS}	
					{blockLSZC}	
					{blockCLZC}	
				</tbody></table>
			</div>
		</div>
		</IScroll>
	</div>
		);
	}	
});


export { PageClient };